<template>
  <div>
    <!-- 快捷导航组件 -->
    <ShortCut></ShortCut>
    
    <!-- 顶部装饰区域 -->
    <div class="image-container">
      <img src="../assets/images/wp.png" class="wp" />
      <p>确认订单</p>
      <img src="../assets/images/image.png" class="wp1" />
    </div>
    <hr class="hr" />
    
    <!-- 订单确认主容器 -->
    <div class="app-container" id="app">
      <!-- 购物车主体 -->
      <div class="main">
        <!-- 步骤指示器 -->
        <div class="step-indicator">
          <div
            class="step"
            :class="{ active: currentStep >= 1 }"
            @click="goToCart"
          >
            <div class="step-circle">✓</div>
            <span>查看购物袋</span>
          </div>
          <div class="step-line"></div>
          <div class="step" :class="{ active: currentStep >= 2 }">
            <div class="step-circle">2</div>
            <span>确认订单信息</span>
          </div>
          <div class="step-line" :class="{ active: currentStep >= 3 }"></div>
          <div class="step" :class="{ active: currentStep >= 3 }">
            <div class="step-circle">3</div>
            <span>成功提交订单</span>
          </div>
        </div>
        <br />

        <!-- 收货信息区域 -->
        <div class="box-hd">
          <h4 class="box-hd-title">收货信息</h4>
        </div>
        <br />
        <div class="address-container">
          <!-- 无地址提示 -->
          <div v-if="addressList.length === 0" class="no-address">
            暂无收货地址，请添加新地址
          </div>
          <!-- 地址列表 -->
          <ul class="address-list" v-else>
            <li
              class="address-item"
              v-for="address in addressList"
              :key="address.id"
              :class="{
                'default-address': address.is_default === 1,
                'selected-address': selectedAddressId === address.id,
              }"
              @click="selectAddress(address)"
            >
              <div class="address-content">
                <h5 v-if="address.is_default === 1">默认地址</h5>
                <h5 v-else>其他地址</h5>
                <p>收货人：{{ address.receiver_name }}</p>
                <p>电话：{{ address.receiver_phone }}</p>
                <p>地址：{{ address.address }}</p>
              </div>
            </li>
            
            <!-- 添加新地址按钮 -->
            <li class="address-item add-new-address" @click.stop="showAddAddressModal">
              <div class="add-address-content">
                <span class="plus-icon-large">+</span>
                <p>添加新地址</p>
              </div>
            </li>
          </ul>
        </div>
        
        <!-- 地址添加弹窗 -->
        <div class="address-modal" v-if="showModal" @click.self="closeModal">
          <div class="modal-content" @click.stop>
            <span class="close" @click.stop="closeModal">&times;</span>
            <h2>添加新地址</h2>
            <form @submit.prevent="submitAddress">
              <div class="form-group">
                <label for="name">收货人姓名</label>
                <input
                  type="text"
                  id="name"
                  v-model="newAddress.receiver_name"
                  required
                />
              </div>
              <div class="form-group">
                <label for="phone">手机号码</label>
                <input
                  type="tel"
                  id="phone"
                  v-model="newAddress.receiver_phone"
                  required
                />
              </div>
              <div class="form-group">
                <label for="address">详细地址</label>
                <textarea
                  id="address"
                  v-model="newAddress.address"
                  required
                ></textarea>
              </div>
              <div class="form-group">
                <label>
                  <input
                    type="checkbox"
                    v-model="newAddress.is_default"
                  /> 设为默认地址
                </label>
              </div>
              <button type="submit" class="submit-btn">保存地址</button>
            </form>
          </div>
        </div>
        <br /><br />

        <!-- 商品清单区域 -->
        <div class="box-hd">
          <h4 class="box-hd-title">商品清单</h4>
        </div>
        <br />

        <!-- 商品清单头部 -->
        <div class="product-info-row">
          <div class="shipping-info">唯品会发货</div>
          <div class="details-group">
            <div class="detail-item">颜色/尺码</div>
            <div class="detail-item">单价</div>
            <div class="detail-item">数量</div>
          </div>
        </div>
        <hr />

        <!-- 商品列表 -->
        <div class="product-list" v-if="orderData">
          <div class="product-items">
            <div
              class="product-item"
              v-for="item in orderData.goodsList"
              :key="item.id"
            >
              <div class="product-img-container">
                <img :src="item.imgSrc" class="product-img" />
              </div>
              <div class="product-details">
                <div class="product-name">{{ item.name }}</div>
                <div class="product-spec">
                  颜色: {{ item.color }} / 尺码: {{ item.size }}
                </div>
              </div>
              <div class="product-price">
                ¥{{ item.DiscountPrice || item.price }}
              </div>
              <div class="product-quantity">{{ item.num }}</div>
            </div>
          </div>
        </div>
        <br /><br /><br />

        <!-- 支付信息区域 -->
        <div class="box-hd">
          <h4 class="box-hd-title">商品支付</h4>
        </div>
        <br />
        <div class="payment-info">
          <!-- 资产信息 -->
          <div class="payment-section">
            <h5 class="section-title">我的资产</h5>
            <ul class="asset-list">
              <li class="asset-item">
                <span class="asset-name">唯品币</span>
                <span class="asset-value">共0个，无可用</span>
              </li>
              <li class="asset-item">
                <span class="asset-name">唯品卡</span>
                <span class="asset-value">共0个，无可用</span>
              </li>
              <li class="asset-item action-item">
                <a href="#" class="action-link">激活唯品卡</a>
              </li>
              <li class="asset-item">
                <span class="asset-name">零钱</span>
                <span class="asset-value">提交订单后可在支付列表使用</span>
              </li>
            </ul>
          </div>

          <!-- 支付方式 -->
          <div class="payment-section">
            <h5 class="section-title">支付方式</h5>
            <ul class="payment-list">
              <li class="payment-item">
                <label class="payment-option">
                  <input
                    type="radio"
                    name="payment-method"
                    checked
                    class="payment-radio"
                  />
                  <span class="payment-checkmark"></span>
                  <span class="payment-type">在线支付</span>
                  <span class="payment-desc">微信支付</span>
                </label>
              </li>
            </ul>
          </div>

          <!-- 订单摘要 -->
          <div class="summary-row">
            <span class="summary-label">实付款：</span>
            <span class="summary-amount"
              >¥{{ orderData?.totalAmount || 0 }}</span
            >
          </div>
          <div class="summary-row">
            <span class="summary-label">送货至：</span>
            <span class="summary-address">{{
              selectedAddress?.address ||
              defaultAddress?.address ||
              "请选择收货地址"
            }}</span>
          </div>
          <!-- 提交订单按钮 -->
          <button class="submit-order-btn" @click="doOrder">提交订单</button>
        </div>
        <br /><br /><br />

        <!-- 微信支付弹窗 -->
        <div class="wechat-pay-modal" v-if="showWechatPay">
          <div class="pay-modal-content">
            <div class="pay-header">
              <h3>微信支付</h3>
              <span class="close-btn" @click="showWechatPay = false">×</span>
            </div>
            <div class="pay-body">
              <div class="qrcode-container">
                <img
                  src="../assets/images/wx.jpg"
                  alt="微信支付二维码"
                  class="qrcode-img"
                />
              </div>
              <p class="pay-amount">
                支付金额：¥{{ orderData?.totalAmount || 0 }}
              </p>
              <p class="pay-tip">请使用微信扫一扫完成支付</p>
            </div>
            <div class="pay-footer">
              <button class="pay-success-btn" @click="handlePaySuccess">
                已完成支付
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
 
<script setup>
// 导入依赖
import axios from "axios";
import { ref, onMounted, computed } from "vue";
import { useCalStore } from "@/stores/cal";
import { useRouter } from "vue-router";
import ShortCut from "@/components/common/ShortCut.vue";
import Footer from "@/components/common/Footer.vue";
 
// 初始化路由和状态管理
const router = useRouter();
const calStore = useCalStore();

// 定义响应式数据
const currentStep = ref(2); // 当前步骤
const orderData = ref(null); // 订单数据
const addressList = ref([]); // 地址列表
const defaultAddress = ref(null); // 默认地址
const selectedAddress = ref(null); // 选中的地址
const selectedAddressId = ref(null); // 选中的地址ID
const showWechatPay = ref(false); // 是否显示微信支付弹窗
const showModal = ref(false); // 是否显示地址添加弹窗
const newAddress = ref({ // 新地址表单数据
  receiver_name: "",
  receiver_phone: "",
  address: "",
  is_default: false,
});

// 计算属性：检查表单是否有效
const isFormValid = computed(() => {
  return (
    newAddress.value.receiver_name?.trim() &&
    newAddress.value.receiver_phone?.trim() &&
    newAddress.value.address?.trim()
  );
});

// 显示添加地址弹窗
const showAddAddressModal = () => {
  console.log("显示添加地址弹窗");
  newAddress.value = {
    receiver_name: "",
    receiver_phone: "",
    address: "",
    is_default: false,
  };
  showModal.value = true;
};

// 关闭弹窗
const closeModal = () => {
  console.log("关闭弹窗");
  showModal.value = false;
};

// 提交新地址
const submitAddress = async () => {
  try {
    // 前端验证
    if (!newAddress.value.receiver_name?.trim() || newAddress.value.receiver_name.trim().length < 2) {
      alert("收货人姓名至少需要2个字符");
      return;
    }

    if (!/^1[3-9]\d{9}$/.test(newAddress.value.receiver_phone?.trim() || "")) {
      alert("请输入有效的11位手机号码");
      return;
    }

    if (!newAddress.value.address?.trim() || newAddress.value.address.trim().length < 5) {
      alert("详细地址至少需要5个字符");
      return;
    }

    const userId = sessionStorage.getItem("userId");
    if (!userId) {
      alert("请先登录");
      return;
    }

    // 准备提交数据
    const addressData = JSON.parse(JSON.stringify({
      userId: userId,
      name: newAddress.value.receiver_name.trim(),
      phone: newAddress.value.receiver_phone.trim(),
      address: newAddress.value.address.trim(),
      is_default: newAddress.value.is_default ? 1 : 0,
    }));

    // 提交到后端API
    const response = await axios.post(
      "http://127.0.0.1:3000/api/address/addAddress",
      addressData,
      {
        headers: {
          'Content-Type': 'application/json'
        }
      }
    );

    if (response.data.status === 0) {
      alert("地址添加成功");
      await fetchAddressData(); // 刷新地址列表
      closeModal();
    } else {
      alert("添加地址失败: " + (response.data.message || "未知错误"));
    }
  } catch (error) {
    console.error("添加地址出错:", error);
    let errorMessage = "添加地址时出错: 未知错误";
    
    if (error.response) {
      errorMessage = `服务器错误: ${error.response.status} - ${error.response.data?.message || "未知错误"}`;
    } else if (error.request) {
      errorMessage = "网络错误: 请求未收到响应";
    } else {
      errorMessage = `请求错误: ${error.message}`;
    }
    
    alert(errorMessage + `\n提交的数据: ${JSON.stringify(addressData)}`);
  }
};

// 选择地址
const selectAddress = (address) => {
  selectedAddressId.value = address.id;
  selectedAddress.value = address;
};

// 获取地址数据
const fetchAddressData = async () => {
  try {
    const userId = sessionStorage.getItem("userId");
    if (!userId) {
      console.error("未找到用户ID");
      return;
    }

    const response = await axios.get(
      `http://127.0.0.1:3000/api/address/getAddress?userId=${userId}`
    );

    if (response.data.status === 0) {
      addressList.value = response.data.data;
      // 找出默认地址
      defaultAddress.value =
        response.data.data.find((addr) => addr.is_default === 1) ||
        response.data.data[0]; // 如果没有默认地址，取第一个

      // 如果有订单数据，尝试匹配订单中的地址
      if (
        orderData.value &&
        orderData.value.goodsList &&
        orderData.value.goodsList.length > 0
      ) {
        const orderAddress = orderData.value.goodsList[0].address;
        const matchedAddress = response.data.data.find(
          (addr) => addr.address === orderAddress
        );

        if (matchedAddress) {
          selectedAddressId.value = matchedAddress.id;
          selectedAddress.value = matchedAddress;
        } else {
          // 如果没有匹配的地址，使用默认地址或第一个地址
          selectedAddressId.value = defaultAddress.value.id;
          selectedAddress.value = defaultAddress.value;
        }
      } else {
        // 如果没有订单数据，使用默认地址或第一个地址
        selectedAddressId.value = defaultAddress.value.id;
        selectedAddress.value = defaultAddress.value;
      }
    } else {
      console.error("获取地址失败:", response.data.message);
    }
  } catch (error) {
    console.error("获取地址数据失败:", error);
  }
};

// 组件挂载时获取订单数据
onMounted(async () => {
  try {
    const userName = sessionStorage.getItem("userName");
    if (!userName) {
      router.push("/login");
      return;
    }

    // 获取地址数据
    await fetchAddressData();

    // 获取最新的订单数据
    const timestamp = new Date().getTime();
    const response = await axios.get(
      `http://localhost:3001/orderList?userName=${userName}&_sort=orderTime&_order=desc&_=${timestamp}`
    );

    if (response.data?.length > 0) {
      // 手动排序确保正确
      const sortedOrders = [...response.data].sort(
        (a, b) => new Date(b.orderTime) - new Date(a.orderTime)
      );

      orderData.value = sortedOrders[0];
    }
  } catch (error) {
    console.error("订单数据获取失败:", error);
  }
});

// 提交订单
const doOrder = () => {
  // 显示微信支付弹窗
  showWechatPay.value = true;

  // 模拟支付成功检测（实际开发中应该使用WebSocket或轮询查询支付状态）
  setTimeout(() => {
    // 实际开发中这里应该是从服务器获取支付状态
    // 这里只是演示，5秒后自动关闭
    if (showWechatPay.value) {
      handlePaySuccess();
    }
  }, 5000);
};

// 处理支付成功
const handlePaySuccess = async () => {
  try {
    if (
      !orderData.value ||
      !orderData.value.goodsList ||
      orderData.value.goodsList.length === 0
    ) {
      throw new Error("无效的订单数据");
    }

    const userId = sessionStorage.getItem("userId");
    if (!userId) {
      throw new Error("未找到用户ID");
    }

    // 获取选中的地址信息
    const address = selectedAddress.value || defaultAddress.value;
    if (!address) {
      throw new Error("未找到收货地址");
    }

    // 准备订单数据
    const orderItems = orderData.value.goodsList.map((item) => ({
      goodsId: item.id,
      goodsName: item.name,
      goodsImg: item.imgSrc,
      size: item.size,
      color: item.color,
      price: item.price,
      num: item.num,
    }));

    const orderToSubmit = {
      orderNum: orderData.value.id, // 使用原订单ID作为新订单号
      userId: userId,
      total: orderData.value.totalAmount,
      amount: orderData.value.goodsList.reduce(
        (sum, item) => sum + item.num,
        0
      ),
      method: 1, // 1表示微信支付
      name: address.receiver_name,
      phone: address.receiver_phone,
      address: address.address,
      Logistics_status: 1, // 1表示已支付
    };

    const requestData = {
      ...orderToSubmit, 
      items: orderItems,
    };

    // 提交订单到新接口
    const response = await axios.post(
      "http://127.0.0.1:3000/api/order/addOrder", requestData
    );

    if (response.data.status === 0) {
      showWechatPay.value = false;

      // 尝试从3001端口删除订单
      try {
        await axios.delete(
          `http://localhost:3001/orderList/${orderData.value.id}`
        );
      } catch (error) {
        console.error("从3001端口删除订单失败:", error);
      }
      
      // 更新状态和路由
      calStore
        .submitOrder()
        .then((res) => {
          calStore.calGoodsList.value = []; // 清空购物车数据
          currentStep.value = 3; // 更新步骤指示器
          alert("支付成功，感谢您的购买！");
          router.push("/goods"); // 跳转到商品页面
        })
        .catch((e) => {
          alert("订单处理失败：" + e.message);
        });
    } else {
      throw new Error(response.data.message || "提交订单失败");
    }
  } catch (error) {
    console.error("支付处理失败:", error);
    alert("支付处理失败: " + error.message);
    showWechatPay.value = false;
  }
};

// 返回购物车
const goToCart = () => {
  currentStep.value = 1;
  router.push("/cart");
};
</script>
<style scoped>
/* 添加调试样式 */
.add-address-btn {
  background: #f5f5f5;
  border: 1px dashed #ccc;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}
 
.add-address-btn:hover {
  background-color: #e9e9e9;
}
 
.plus-icon {
  font-size: 16px;
  margin-right: 5px;
}
 
.address-modal {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}
 
.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
  position: relative;
}
 
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}
 
/* 确保弹窗在最上层 */
.address-modal {
  pointer-events: auto;
}
/* 新增样式 */
.add-address-btn {
  background: none;
  border: 1px dashed #ccc;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}
 
.add-address-btn:hover {
  background-color: #f5f5f5;
}
 
.plus-icon {
  font-size: 16px;
  margin-right: 5px;
}
 
.address-list {
  list-style: none;
  padding: 0;
}
 
.address-item {
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}
 
.address-item:hover {
  border-color: #ff69b4;
}
 
.add-new-address {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9f9f9;
  border: 1px dashed #ccc;
}
 
.add-new-address:hover {
  background-color: #f0f0f0;
}
 
.add-address-content {
  text-align: center;
}
 
.plus-icon-large {
  font-size: 24px;
  color: #999;
}
 
/* 弹窗样式 */
.address-modal {
  display: block;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
 
.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  border-radius: 8px;
  position: relative;
}
 
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
 
.close:hover {
  color: black;
}
 
.form-group {
  margin-bottom: 15px;
}
 
.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
 
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}
 
.form-group textarea {
  height: 80px;
  resize: vertical;
}
 
.submit-btn {
  background-color: #ff69b4;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
}
 
.submit-btn:hover {
  background-color: #ff1493;
}
/* 地址列表样式 */
.address-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.address-item {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  width: 250px;
  position: relative;
  transition: all 0.3s ease;
}

.address-item:hover {
  border-color: #ff6700;
}

.address-item.selected-address {
  border-color: #ff0000;
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.2);
}

.address-item.default-address {
  border-color: #ff6700;
}

.address-content h5 {
  margin: 0 0 10px 0;
  color: #ff6700;
  font-size: 14px;
}

.address-content p {
  margin: 5px 0;
  font-size: 13px;
  color: #333;
}

/* 微信支付弹窗样式 */
.wechat-pay-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.pay-modal-content {
  background: white;
  border-radius: 8px;
  width: 350px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.pay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.pay-header h3 {
  margin: 0;
  color: #333;
}

.close-btn {
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.qrcode-container {
  text-align: center;
  margin: 20px 0;
}

.qrcode-img {
  width: 200px;
  height: 200px;
  border: 1px solid #eee;
}

.pay-amount {
  text-align: center;
  font-size: 18px;
  color: #f10180;
  font-weight: bold;
  margin: 10px 0;
}

.pay-tip {
  text-align: center;
  color: #666;
  font-size: 14px;
}

.pay-footer {
  text-align: center;
  margin-top: 20px;
}

.pay-success-btn {
  background: #f10180;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.pay-success-btn:hover {
  background: #e00070;
}

/* 订单汇总样式 */
.summary-row {
  margin-bottom: 15px;
  font-size: 16px;
}

.summary-label {
  color: #666;
  margin-right: 10px;
}

.summary-amount {
  color: #f10180;
  font-weight: bold;
  font-size: 20px;
}

.summary-address {
  color: #333;
}

.submit-order-btn {
  background: #f10180;
  color: white;
  width: 210px;
  height: 50px;
  border: none;
  font-size: 18px;
  margin-left: auto;
  display: block;
}

.submit-order-btn:hover {
  background: #e00070;
}

/* 支付信息样式 */
.payment-info {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.payment-section {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.section-title {
  font-size: 16px;
  color: #333;
  margin: 0 0 15px 0;
  font-weight: 600;
}

.asset-list,
.payment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.asset-item,
.payment-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
}

.asset-name,
.payment-type {
  color: #666;
  width: 80px;
}

.asset-value,
.payment-desc {
  color: #999;
  flex: 1;
}

.action-item {
  padding-left: 80px;
}

.action-link {
  color: #f10180;
  text-decoration: none;
}

.action-link:hover {
  text-decoration: underline;
}

/* 商品列表样式 */
.product-list {
  margin-top: 15px;
}

.product-items {
  border: 1px solid #eee;
  border-radius: 4px;
}

.product-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
}

.product-item:last-child {
  border-bottom: none;
}

.product-img-container {
  width: 80px;
  height: 80px;
  margin-right: 15px;
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-details {
  flex: 1;
}

.product-name {
  font-size: 14px;
  margin-bottom: 5px;
}

.product-spec {
  font-size: 12px;
  color: #999;
}

.product-price,
.product-quantity {
  width: 100px;
  text-align: center;
  font-size: 16px;
}

/* 商品信息行样式 */
.product-info-row {
  display: flex;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  align-items: center;
}

.shipping-info {
  width: 50%;
  text-align: left;
  padding-left: 15px;
  color: #f10180;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.details-group {
  width: 50%;
  display: flex;
}

.detail-item {
  flex: 1;
  text-align: center;
  color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 标题框样式 */
.box-hd {
  padding: 10px 15px;
  height: 30px;
  line-height: 10px;
  border: 1px solid #e2e2e2;
  border-left: 2px solid #f3168a;
  background-color: #f9f9f9;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

/* 步骤指示器样式 */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #e0e0e0;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

.step.active .step-circle {
  background-color: #409eff;
  color: white;
}

.step-line {
  width: 60px;
  height: 2px;
  background-color: #e0e0e0;
  margin: 0 10px;
}

.step-line.active {
  background-color: #409eff;
}

/* 水平线样式 */
.hr {
  height: 2px;
  background-color: #f3168a;
  border: none;
}

/* 图片容器样式 */
.image-container {
  display: flex;
  align-items: center;
}

.wp {
  width: 20%;
  margin-left: 330px;
}

.wp1 {
  width: 40%;
  margin-left: 600px;
}

/* 主容器样式 */
.app-container {
  padding-bottom: 300px;
  width: 800px;
  margin: 0 auto;
}

@media screen and (max-width: 800px) {
  .app-container {
    width: 600px;
  }
}
</style>